<template>
  <div class="app-declaration-info">
    <div class="info-item">
      <!-- <span>涉及的需求类型：{{ listData.content1 }}</span> -->
      <span>涉及的需求类型：{{ formatType(listData) }}</span>
    </div>
    <div class="info-item">
      <span>详细内容：{{ listData.content2 }}</span>
    </div>
    <div class="info-item">
        <span>佐证材料：</span>
        <FilePreview  :type="'view'" v-model="fileData" v-if="fileData.length"></FilePreview>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
import { ElMessage } from 'element-plus'
import { downBlobFile } from '/@/utils/other';
import FilePreview from '/@/components/HyUploadCopy/index.vue';
import { useDict } from '/@/hooks/dict';

export default defineComponent({
  name: "AppDeclarationInfo",
  components:{
    FilePreview
  },
  props: {
    // listData: {
    //   type: Array,
    //   default: () => []
    // }
    listData: {
      type: Object,
      default: () => {}
    }
  },
  setup(props){
    const fileData = ref([])
    watch(
      () => props.listData,
      (nv1) => {
        console.log(nv1)
        let urlData = nv1.fileUrl.split(',')
        let nameData = nv1.fileName.split(',')
        urlData.forEach((item,index)=>{
          fileData.value.push({
            url:item,
            name:nameData[index]
          })
        })
        console.log(fileData.value)
      },
      { immediate: true }
    );
    const {
			decision_demand_type:DPCC,
			city_government_demand_type:SWSZF,
			reform_demand_type:XJDQGG,
		} = useDict(
			'decision_demand_type',
			'city_government_demand_type',
			'reform_demand_type',
		)
		const optionsTypes = {
			'1': DPCC, // 党中央国务院决策部署
			'2': SWSZF, // 市委市政府要求
			'6': XJDQGG, // 先进地区改革创新经验
		};
    function formatType(row:Object){
      if(optionsTypes.hasOwnProperty(row.type)){
        let options = optionsTypes[row.type]
        const rowArr = options.value.filter((item) => item.value == row.content1);
        return rowArr.length && rowArr[0].label;
      }else{
        return row.content1
      }
    }
    function downLoadFile(file){
      console.log(file)
      // fileUrl
      const fileData = file.fileUrl.split(',')
      fileData.forEach(item=>{
        if(item){
          const fileStr = item.split('?')&&item.split('?')[1]
          console.log(fileStr)
          if(fileStr){
            downBlobFile(`/admin/sys-file/oss/file?${fileStr}`, {}, fileStr.split('=')[1])
          }else{
            ElMessage.error('暂无数据')
          }
        }
      })
    }
    return {
      formatType,
      downLoadFile,
      fileData
    }
  }
})
</script>

<style scoped lang="scss">
  .app-declaration-info {
    border: dashed 1px #dcdfe6;
    background-color: #f7f8fa;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;

    .info-item {
      display: flex;
      //align-items: center;
      gap: 5px;
      img {
        width: 160px;
        height: 96px;
        border-radius: 4px;
      }
      .info-oper{
        font-size: 12px;
        text-align: center;
        display: flex;
        align-items: center;
        >span{
          margin-left: 10px;
          display: flex;
          align-self: center;
          font-size: 16px;
          color: var(--el-color-primary);
        }
      }
    }
  }


  .app-declaration-info .el-image {
    padding: 0 5px;
    max-width: 300px;
    max-height: 200px;
    width: 100%;
    height: 200px;
  }

  .app-declaration-info .image-slot {
    border:dashed 1px #dcdfe6;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 30px;
    p{
      width: 100%;
      text-align: center;
      font-size: 12px;
    }
  }
  .app-declaration-info .image-slot .el-icon {
    font-size: 30px;
  }
</style>